<template>
  <div class="app-container">
    <el-card class="filter-container" shadow="never" style="margin-top: 15px">
      <div>
        <i class="el-icon-search" />
        <span>筛选搜索</span>
        <el-button
          style="float: right"
          type="primary"
          size="small"
          @click="handleSearchList()"
          >查询搜索</el-button
        >
        <el-button
          style="float: right; margin-right: 15px"
          size="small"
          @click="handleResetSearch()"
          >重置</el-button
        >
        <el-button
          style="float: right; margin-right: 5px"
          size="small"
          @click="handleRefreshList()"
          >刷新</el-button
        >
      </div>
      <div style="margin-top: 25px">
        <el-form
          :inline="true"
          :model="listQuery"
          size="small"
          label-width="160px"
        >
          <el-form-item label="申请时间：" class="inlineCt">
            <el-date-picker
              v-model="timeArr"
              type="daterange"
              :picker-options="pickerOptions"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              align="right"
              value-format="yyyy-MM-dd"
              unlink-panels
              @change="changeTime"
            />
          </el-form-item>

          <el-form-item label="维权人：" class="inlineCt">
            <el-input
              v-model.trim="listQuery.rightsDefenderName"
              class="input-width"
              placeholder="请输入"
            />
          </el-form-item>

          <el-form-item label="被投诉方：" class="inlineCt">
            <el-input
              v-model.trim="listQuery.complaintObject"
              class="input-width"
              placeholder="请输入"
            />
          </el-form-item>
        </el-form>
      </div>

      <el-tabs v-model="listQuery.dealState" type="card" @tab-click="getList">
        <el-tab-pane
          v-for="(item, index) in dealStateOptions"
          :key="'dealState-type-2' + index"
          :label="item.label"
          :name="item.value + ''"
        />
      </el-tabs>
    </el-card>
    <div class="table-container">
      <el-table
        ref="table"
        v-loading="listLoading"
        :data="list"
        style="width: 100%"
        border
      >
        <el-table-column label="提交时间" align="center">
          <template slot-scope="scope">{{ scope.row.createDate }}</template>
        </el-table-column>
        <el-table-column label="维权人" align="center">
          <template slot-scope="scope">{{
            scope.row.rightsDefenderName
          }}</template>
        </el-table-column>
        <el-table-column label="联系电话" align="center">
          <template slot-scope="scope">{{ scope.row.phoneNumber }}</template>
        </el-table-column>
        <el-table-column label="被投诉方" align="center">
          <template slot-scope="scope">{{
            scope.row.complaintObject
          }}</template>
        </el-table-column>
        <el-table-column label="问题类型" align="center">
          <template slot-scope="scope">{{
            scope.row.problemType | problemType
          }}</template>
        </el-table-column>
        <el-table-column label="问题描述" align="center">
          <template slot-scope="scope">{{
            scope.row.problemDescription
          }}</template>
        </el-table-column>
        <el-table-column label="图片" align="center">
          <template slot-scope="scope">
            <el-button
              v-if="scope.row.problemPicUrl"
              type="text"
              @click="
                $viewerApi({
                  images: scope.row.problemPicUrl
                    .split(',')
                    .map(src => VUE_APP_FILE + src)
                })
              "
            >
              查看图片
            </el-button>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" key="13">
          <template slot-scope="scope">
            <!-- 待受理 -->
            <!-- <el-button
              v-if="scope.row.dealState === 0"
              type="primary"
              size="mini"
              style="margin: 5px"
              @click="handleDeal(scope.row)"
              >标为已受理</el-button
            > -->

            <!-- 已受理 -->
            <el-button
              v-if="scope.row.dealState === 1"
              type="primary"
              size="mini"
              style="margin: 5px"
              @click="handleComplete(scope.row)"
              >填写处理结果</el-button
            >

            <!-- 已解决 -->
            <el-button
              v-if="scope.row.dealState === 2"
              type="primary"
              size="mini"
              style="margin: 5px"
              @click="handleComplete(scope.row, 'detail')"
              >查看处理结果</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination-container">
      <el-pagination
        background
        layout="total, sizes,prev, pager, next,jumper"
        :current-page.sync="listQuery.current"
        :page-size="listQuery.size"
        :page-sizes="[5, 10, 20, 30, 50]"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <complete-dialog :dialog-data="completeDialogData" @getList="getList" />
  </div>
</template>
<script>
const VUE_APP_FILE = process.env.VUE_APP_FILE;

import * as api from "@/api/renovation-rights-protection";
import CompleteDialog from "./CompleteDialog";
const defaultListQuery = {
  current: 1,
  size: 10,
  startCreateDate: null,
  endCreateDate: null,
  rightsDefenderName: null,
  complaintObject: null,
  dealState: 0
};
const list = [];
export default {
  name: "product-sell",
  components: {
    CompleteDialog
  },
  data() {
    return {
      listQuery: Object.assign({}, defaultListQuery),
      listLoading: false,
      list: [],
      total: 0,
      completeDialogData: {
        dialogVisible: false,
        value: "",
        id: ""
      },

      timeArr: [],
      dealStateOptions: this.optionsArr.dealState,
      pickerOptions: this.optionsArr.timePicker,
      VUE_APP_FILE
    };
  },
  watch: {},
  created() {
    this.getList();
  },
  methods: {
    changeTime(e) {
      this.listQuery.startCreateDate = e[0] || null;
      this.listQuery.endCreateDate = e[1] || null;
    },
    handleRefreshList() {
      this.getList();
    },
    handleResetSearch() {
      this.listQuery = Object.assign({}, defaultListQuery);
      this.getList();
    },
    handleSearchList() {
      this.listQuery.current = 1;
      this.getList();
    },
    // handleSelectionChange(val) {
    //   this.multipleSelection = val;
    // },
    handleSizeChange(val) {
      this.listQuery.current = 1;
      this.listQuery.size = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.listQuery.current = val;
      this.getList();
    },
    /* 获取列表 */
    getList() {
      this.list = list;
      this.listLoading = true;
      let data = JSON.parse(JSON.stringify(this.listQuery));
      api
        .zbbDecorationRightsProtectionList(data)
        .then(response => {
          this.listLoading = false;
          this.list = response.data.records;
          this.total = response.data.total;
        })
        .catch(error => {
          this.listLoading = false;
        });
    },
    handleDeal(row) {
      this.$confirm("是否确认受理？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.listLoading = true;
        api.zbbDecorationRightsProtectionDeal(row.id).then(response => {
          this.$message({
            message: "操作成功！",
            type: "success",
            duration: 3000
          });
          this.handleSearchList();
        });
      });
    },

    handleComplete(row, type) {
      this.completeDialogData.dialogVisible = true;
      this.completeDialogData.value = row;
      this.completeDialogData.id = row.id;
      this.completeDialogData.isEdit = type !== "detail";
    }
  }
};
</script>
<style scoped>
.staticCt {
  margin: 20px 0;
  border-left: 1px solid #dcdfe6;
  border-top: 1px solid #dcdfe6;
}
.table-cell-title {
  border-right: 1px solid #dcdfe6;
  border-bottom: 1px solid #dcdfe6;
  padding: 10px;
  background: #f2f6fc;
  text-align: left;
  font-size: 14px;
  color: #303133;
}
</style>
